   * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .box {
        margin: 0 auto;
        width: 500px;
        background-color: #87ceeb;
      }
      .box > .nav {
        display: flex;
      }
      /* .box > .nav:hover + .main {
        height: 300px;
      } */
      .box > .nav > li {
        flex-grow: 1;
        text-align: center;
        cursor: pointer;
      }
      .box > .nav > li:hover {
        background-color: orange;
      }

      .main {
        display: flex;
        justify-content: space-around;
        height: 0;
        transition: height 0.3s;
        overflow: hidden;
      }
      .main > li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }